<template>
    <div>
        <yw-header></yw-header>
        <div class="recharge-layout">
            <div class="main-b">
                <!-- Recharge-title begin -->
                <div class="recharge-title">
                    <h3>请认真填写充值信息</h3>
                    <p>
                        为避免错误操作导致您的损失，请您认真填写充值信息！如遇到问题请联系客服：
                        <a>
                            点击此处
                            <label class="recharge-tip">
                                <label> <img src="../assets/img/pay/Pay-QR.png"></label>
                                <span>APP充值更便捷哦</span>
                            </label>
                        </a>
                    </p>
                </div>
                <!-- Recharge-title end -->

                <!-- Pay-user begin -->
                <div class="Pay-user ">
                    <div class="Pay-user-ChatHead">
                        <img :src="$imgPath(detailObj.headImg)" title="用户名">
                    </div>
                    <div class="Pay-user-name">
                        <h3>{{detailObj.nickname}}</h3>
                        <p>您当前的贡献值为：<span>{{myGxzs}}</span></p>
                    </div>
                    <div class="Pay-user-Amount" v-if="tabIndex == 0">
                        <p>账户余额：￥<span>{{moneyObj.recharge}}</span></p>
                    </div>
                    <div class="Pay-user-Amount" v-else>
                        <p>钻石余额：<span>{{moneyObj.credits}}钻石</span></p>
                    </div>
                </div>
                <!-- Pay-user end -->

                <!-- pay begin -->
                <div class="pay">
                    <div class="pay-option">
                        <ul>
                            <li v-for="(item,index) in topUpList" :key="index" :class="[tabIndex == index ? 'active' : '']"><a  @click="tabIndex = index,listType()">{{item}}</a></li>
                        </ul>
                    </div>

                    <div class="pay-money" v-if="tabIndex == 0">
                        <div class="pay-name">
                            充值余额：
                        </div>
                        <div class="pay-umb">
                            <a :class="[moneyIndex == index ? 'active' : '']" v-for="(item,index) in moneyList" :key="index" @click="moneyIndex = index,money = item.price">{{item.price}}元</a>
                            <div class="pay-input">
                                <input placeholder="请输入其他金额" v-model="otherMoney1" @input="otherInputMoney()">
                                元
                            </div>
                        </div>
                    </div>
                    <div class="pay-jewel" v-else>
                        <div class="pay-jewel-name">
                            充值钻石：
                        </div>
                        <div class="pay-jewel-umb">
                            <a :class="[zsIndex == index ? 'active' : '']" v-for="(item,index) in zsList" :key="index" @click="zsIndex = index,money=item.price">
                                <i class="pay-jewel-icon"></i><h2>{{item.name}}</h2>
                                <p>售价:{{item.price}}元</p>
                                <span>送{{item.present}}钻</span>
                            </a>
                            <div class="pay-jewel-input">
                                <input placeholder="请输入其他金额" v-model="otherMoney" @input="otherInput()">
                            </div>
                            <p class="zengsong" v-if="zsNum != 0">购买{{zsNum.finalMoney ? zsNum.finalMoney : 0}}钻，赠送{{zsNum.present ? zsNum.present : 0}}钻</p>
                            <p class="pay-jewel-reminder">
                                *兑换比例：1元=10钻石
                            </p>
                        </div>
                    </div>
                    <div class="Payment ">
                        <div class="Payment-name">
                            支付方式：
                        </div>
                        <div class="Payment-umb">
                            <a class="Pay-zfb" :class="[zhifuType == 0 ? 'active' : '']" @click="zhifuType = 0"><img src="../assets/img/pay/Pay-zfb.png"></a>
                            <a class="Pay-wx" :class="[zhifuType == 1 ? 'active' : '']" @click="zhifuType = 1"><img src="../assets/img/pay/Pay-wx.png"></a>
                            <div class="pay-agreement">
                                我已阅读并同意<a>《关于用户充值的热别提示与约定》</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- pay end -->

                <div class="pay-bt-gr">
                    <a @click="goAliPay()">立即支付</a>
                </div>
                <Modal
                    v-model="ewmBox"
                    :closable="false" :footer-hide="true" width="210" class-name="vertical-center-modal">
                    <canvas ref="canvas"></canvas>
                </Modal>
                
            </div>
        </div>
        <yw-footer></yw-footer>
    </div>
</template>
<script>
import apiHttp from '../api/index.js'
import header from './common/header'
import footer from './common/footer'
import QRCode from 'qrcode'
export default {
    data(){
        return{
            topUpList:['账户充值','钻石充值'],
            tabIndex:this.$route.query.tabIndex ? this.$route.query.tabIndex : '0',
            moneyList:[],       // money充值列表
            moneyIndex:0,       // money充值index
            money:0,            // 充值的money
            zsList:[],          // 钻石充值列表
            zsIndex:0,          // 钻石充值index
            moneyObj:{},        // 钱包详情
            detailObj:{},       // 个人信息
            zhifuType:0,        // 支付方式选择
            otherMoney1:'',     // 充钱
            otherMoney:'',      // 其他金额
            zsNum:{},            // 购买钻石
            formZFB:'',         // 支付宝返回的表单
            ewmBox:false,       // 微信支付二维码弹框
            returnUrl:`http://${location.host}/center?leftIndex=1`,
            myGxzs:'',          // 我的贡献值
            wxZfSuccess:'',     // 微信支付成功计时器
        }
    },
    components:{
        'yw-header':header,
        'yw-footer':footer,
    },
    mounted(){
        this.rechargeList()
        this.rechargeListIOS()
        this.getUserWalletDetail()
        this.screening()
        this.myGxz()
    },
    methods:{
        // 列表切换
        listType(){
            if(this.tabIndex == 0){
                this.money = this.moneyList[0].price
                this.otherMoney1 = ''
                this.moneyIndex = 0
            }else{
                this.money = this.zsList[0].price
                this.otherMoney = ''
                this.zsIndex = 0
            }
        },
        // money充值列表
        rechargeList(){
            let params = {
                source:1
            }
            apiHttp.apiCenter.rechargeList(params,resp=>{
                if(resp.code == 200){
                    this.moneyList = resp.data
                    this.money = this.moneyList[0].price
                }
            })
        },
        // 钻石充值列表
        rechargeListIOS(){
            let params = {
                source:1,
                type:1,
            }
            apiHttp.apiCenter.rechargeListIOS(params,resp=>{
                if(resp.code == 200){
                    this.zsList = resp.data
                    this.money = this.zsList[0].price
                }
            })
        },
        // 钱包详情
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.moneyObj = resp.data
                }
            })
        },
        // 我的贡献值
        myGxz(){
            apiHttp.apiCenter.myGxz('',resp => {
                this.myGxzs = resp.data
            })
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.detailObj = resp
            })
        },
        // 余额其他充值
        otherInputMoney(){
            if(this.otherMoney1){
                this.moneyIndex = -1
            }
            if(this.otherMoney1 > 50000){
                this.$Message.info("单笔最高充值金额50000元，请重新输入")
            }
            if(parseFloat(this.otherMoney1) > 50000){
                this.otherMoney1 = 50000
            }
            this.money = this.otherMoney1
        },
        // 钻石其他充值
        otherInput(){
            if(this.otherMoney>50000){
                this.$Message.info("单笔最高充值金额50000元，请重新输入")
                this.otherMoney=50000
                this.getOtherMoneyDiamond()
                this.money = this.otherMoney
                return
            }
            let nums = this.otherMoney.split('.')
            if(nums.length>1){
                if(nums[1].length>2){
                    this.$Message.info("只支持2位小数，请重新输入")
                    this.otherMoney = ''
                }
                this.getOtherMoneyDiamond()
                this.money = this.otherMoney
                return
            }
            if(this.otherMoney){
                this.zsIndex = -1
            }
            this.money = this.otherMoney
            this.getOtherMoneyDiamond()
        },
        // 计算赠送钻石数量
        getOtherMoneyDiamond(){
            let url = '?money='+this.otherMoney+'&source=1'
            apiHttp.apiCenter.getOtherMoneyDiamond(url,'',resp=> {
                if(resp.code==200){
                    this.zsNum =  resp.data
                }else{
                    this.zsNum = {}
                }
            })
        },
        // 立即支付
        goAliPay(){
            if(this.tabIndex == 0){
                this.zhifu()
            }else{
                this.creditsPay()
            }
        },
        // 充值钻石支付
        creditsPay(){
            let payType = ''
            let data = {}
            if(this.zhifuType == 0){
                payType = 11
                data = {
                    money:this.money,//金额
                    payType:11,//支付类型
                    count:1,
                    source:3,   //1APP 2IOS 3WEB
                    autoCost:false,
                    returnUrl:this.returnUrl
                }
            }else if(this.zhifuType == 1){
                payType = 4
                data = {
                    money:this.money,//金额
                    payType:4,//支付类型
                    count:1,
                    source:3,   //1APP 2IOS 3WEB
                    autoCost:false,
                }
            }
            apiHttp.apiCenter.creditsPay(data,resp=> {
                if (resp.code == 200) {
                    if(payType == 11){
                        this.formZFB = resp.data
                        const div = document.createElement('div')
                        div.innerHTML = this.formZFB
                        document.body.appendChild(div)
                        document.forms[0].submit()
                    }else if(payType == 4){
                        this.qrcode(resp.data)
                    }
                }
            })
        },
        // 充值余额支付
        zhifu(){
            let params = {}
            let payType = ''
            if(this.zhifuType == 0){
                payType = 11
                params = {
                    money:this.money,//金额
                    payType:11,//支付类型
                    count:1,
                    source:3,   //1APP 2IOS 3WEB
                    returnUrl:this.returnUrl
                }
            }else if(this.zhifuType == 1){
                payType = 4
                params = {
                    money:this.money,//金额
                    payType:4,//支付类型
                    count:1,
                    source:3,   //1APP 2IOS 3WEB
                }
            }
            apiHttp.apiCenter.rechargePay(params,resp=>{
                if(resp.code == 200){
                    if(payType == 11){
                        this.formZFB = resp.data
                        const div = document.createElement('div')
                        div.innerHTML = this.formZFB
                        document.body.appendChild(div)
                        document.forms[0].submit()
                    }else if(payType == 4){
                        this.qrcode(resp.data)
                    }
                }
            })
        },
        // 微信支付生成二维码
        qrcode (data) {
            let self = this
            let opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                rendererOpts: {
                    quality: 0.3
                }
            }
            QRCode.toCanvas(this.$refs.canvas,data.url, opts,(err, url)=> {
                if (err){
                    console.log(err)
                }
            })
            this.wxZfSuccess = setInterval(()=>{
                self.orderVerify(data.orderId)
            },3000)
            this.ewmBox = true
        },
        // 判断微信支付是否成功
        orderVerify(id){
            apiHttp.apiCenter.orderVerify(id,'',resp=>{
                if(resp.data == true){
                    clearInterval(this.wxZfSuccess)
                    this.ewmBox = false
                    this.$Message.success('微信支付成功')
                    this.$router.push({
                        name:'center',
                        query:{
                            leftIndex: '1'
                        }
                    })
                }
            })
        }
    }
}
</script>
<style scoped>
#canvas{
    width: 80%!important;
    height: auto!important;
  }
</style>

